<template>
  <div class="home">
    <div class="box">
      <!-- 用量 -->
      <div class="dosage">
        <div class="title">
          <span>用量概况</span>
        </div>
        <div class="items">
          <div class="item item1">
            <div>
              <span>目前可用总存证余量</span>
              <button>购买</button>
            </div>
            <div>
              <span>254</span>
            </div>
            <div>司法存证：120</div>
            <div>司法存证： 134</div>
          </div>
          <div class="item item2">
            <div class="left">
              <ul>
                <li>已有证</li>
                <li>2</li>
                <li>司法存证：0</li>
                <li>司法存证：0</li>
              </ul>
            </div>
            <div class="right">
              <div>
                <button>新增存证</button>
              </div>
              <div>
                <button @click="router.push('/console/existing')">
                  查看全部
                </button>
              </div>
            </div>
          </div>
          <div class="item item3">
            <div class="left">
              <ul>
                <li>已取证</li>
                <li>0</li>
                <li>未上线，敬请留意</li>
              </ul>
            </div>
            <div class="right">
              <div>
                <button>新增存证</button>
              </div>
              <div>
                <button>查看全部</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 订单管理 -->
      <div class="orderbox">
        <div class="title">订单管理</div>
        <div class="order">
          <el-table :data="tableData" height="200" border style="width: 100%">
            <el-table-column prop="id" label="订单编号" width="180" />
            <el-table-column prop="date" label="订单时间" width="180" />
            <el-table-column prop="name" label="产品名称" width="180" />
            <el-table-column prop="price" label="订单金额" width="180" />
            <el-table-column prop="num" label="订单数量" width="180" />
            <el-table-column prop="status" label="订单状态">
              <template #default="scoped">
                <div
                  :style="{ color: scoped.row.status ? '#0079FE' : '#ccc' }"
                  v-if="scoped.row.status"
                >
                  支付成功
                </div>
                <div
                  :style="{ color: scoped.row.status ? '#0079FE' : '#ccc' }"
                  v-else
                >
                  未支付
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
const tableData = [
  {
    id: 1,
    date: "2016-05-03",
    name: "司法存证",
    price: 0.42,
    num: 12,
    status: true,
  },
  {
    id: 2,
    date: "2016-05-03",
    name: "司法存证",
    price: 0.42,
    num: 12,
    status: true,
  },
  {
    id: 3,
    date: "2016-05-03",
    name: "司法存证",
    price: 0.42,
    num: 12,
    status: true,
  },
  {
    id: 4,
    date: "2016-05-03",
    name: "司法存证",
    price: 0.42,
    num: 12,
    status: true,
  },
  {
    id: 5,
    date: "2016-05-03",
    name: "司法存证",
    price: 0.42,
    num: 12,
    status: true,
  },
];
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  height: calc(100% - 61px);
  display: flex;
  justify-content: center;
  align-items: center;
  .box {
    width: 80%;
    height: 90%;
    .dosage {
      height: 200px;
      .title {
        height: 40px;
        line-height: 40px;
        font-weight: bold;
      }
      .items {
        display: flex;
        justify-content: space-between;
        .item {
          width: 300px;
          height: 160px;
          padding: 0 20px;
          border: 1px solid #cccccc;
        }
        .item1 {
          div {
            height: 40px;
          }
          div:first-child {
            display: flex;
            justify-content: space-between;
            margin: 10px 0 0 0;
            align-items: center;
            button {
              width: 60px;
              height: 25px;
              color: white;
              background-color: rgba(0, 121, 254, 1);
              border-radius: 3px;
              border: none;
            }
            button:hover {
              cursor: pointer;
            }
          }
          div:nth-child(2) {
            span {
              font-weight: bold;
            }
          }
        }
        .item2,
        .item3 {
          display: flex;
          .left {
            flex: 1;
            margin: 10px 0 0 0;
            ul {
              li {
                height: 40px;
              }
            }
          }
          .right {
            flex: 1;
            margin: 10px 0 0 0;
            text-align: right;
            div {
              margin: 0 0 10px 0;
              button {
                width: 80px;
                height: 30px;
                border: 1px solid #cccccc;
                border-radius: 3px;
                background: white;
              }
            }
            div:hover button {
              cursor: pointer;
              border: 1px solid #0079fe;
              color: #0079fe;
            }
          }
        }
        .item3 {
          .right {
            div {
              button {
                border: 1px solid #cccccc;
                color: #cccccc;
              }
            }
            div:hover button {
              border: 1px solid #ccc;
              color: #cccccc;
            }
          }
        }
      }
    }
    .orderbox {
      height: calc(100% - 200px);
      .title {
        height: 40px;
        line-height: 40px;
        font-weight: bold;
      }
      .order {
        height: calc(100% - 80px);
        border: 1px solid #cccccc;
        padding: 20px;
        overflow: auto;
      }
      .order::-webkit-scrollbar {
        width: 0;
      }
    }
  }
}
</style>